<!--  -->
<template>
  <el-container>
    <el-header
      class="header"
      style="text-align: right; font-size: 12px"
    >
      <!-- 展开 收缩 -->
      <i
        class="el-icon-menu open_close_btn"
        style="margin-right: 15px"
        @click="change_collapse"
      ></i>

      <!-- 面包屑 -->
      <!-- 
        面包屑结合使用路由的matched 
          (matched可以得到嵌套的各层的路由信息 自然就可以得到name 如name="讲师管理")
       -->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">
          首页
        </el-breadcrumb-item>
        <!-- 面包屑 显示各级目录 -->
        <template v-if="this.$route.name != '首页'">
          <el-breadcrumb-item
            v-for="item in breadcrumb_list"
            :key="item.id"
            :to="{ path: item.path }"
          >{{ item.name }}
          </el-breadcrumb-item>
        </template>
      </el-breadcrumb>

      <!-- 头像 -->
      <div class="block">
        <el-avatar
          shape="square"
          :size="40"
          :src="img"
          fit="fill"
        >
          <!-- 默认 -->
          <img
            src="../assets/default.png"
            alt=""
          />
        </el-avatar>
      </div>
      <span class="uname">猪竹煮著</span>
    </el-header>

    <el-main style="background-color: #f5f7f9">
      <!-- 路由页面 -->
      <keep-alive>
        <router-view :style="{
          backgroundColor:
            this.$route.name === '讲师列表' ? 'transparent' : 'white',
        }"></router-view>
      </keep-alive>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "container",
  data() {
    return {
      avatar_img: "",
      isCollapse: false,
      breadcrumb_list: [],
      img: require("../assets/avatar.jpg"), //这个头像组件要用本地图片的话 要import/require引入再使用
    };
  },
  methods: {
    change_collapse() {
      this.isCollapse = !this.isCollapse;
      this.$bus.$emit("change_isCollapse", this.isCollapse);
    },
  },
  watch: {
    $route(to, from) {
      //newValue oldValue
      // console.log(to);
      this.breadcrumb_list = to.matched;
    },
  },
  created() {
    this.breadcrumb_list = this.$route.matched;
  },
};
</script>

<style  scoped>
.el-header {
  position: relative;
  height: 100%;
  padding: 0 20px;
}
.el-header {
  background-color: #515a6e;
  color: white;
  line-height: 60px;
}
.uname {
  display: inline-block;
  width: 70px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.block .el-avatar {
  position: absolute;
  right: 95px;
  top: 50%;
  transform: translate(0, -50%);
}

.open_close_btn {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 25px;
  cursor: pointer;
}
.open_close_btn:hover {
  color: #5cb6ff;
}

.el-breadcrumb {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 16px;
}

::v-deep .el-breadcrumb__inner {
  color: white !important;
}
</style>
